Estoy creando una aplicación usando vue js. En la aplicación, obtengo todos los datos del archivo JSON y, cuando intento cargar el archivo JSON con el método getJSON() de jQuery, aparece un error durante la representación de la página web.
Error al representar la instancia raíz: vue.js: 2229 TypeError no detectado: no se puede leer la propiedad 'título' de nulo
Tengo entendido que estoy cargando el archivo json en el "método creado" usando el método getJSON() de jQuery, que es un método asincrónico, por lo que vue js intenta completar los datos json en mi plantilla tan pronto como crea la instancia de vue sin esperar el 100 % de carga del archivo json, por lo que arroja el error "No se puede leer la propiedad 'título' de nulo" ya que configuré el valor inicial del modelo de datos en nulo. ¿Estoy en lo correcto? Si es así, ¿cómo puedo evitarlo? Una forma es usar la "solicitud ajax síncrona", que funciona bien en mi caso, pero creo que no es una buena idea seguir usando una solicitud síncrona en 2017. ya que frustrará a los usuarios en caso de una carga prolongada para el archivo JSON. Chicos por favor ayúdenme
Ejemplo usando el método getJSON() de jQuery:
var viewModel = new Vue({ el: '#templateBody', data: { jsonData: null }, created: function() { var self = this; self.fetchJSONData(); }, methods: { fetchJSONData: function() { var self = this; $.getJSON("data.json", function(data, status, xhr) { if (status == "success") { self.jsonData = data; } else { console.log("JSON data not Loaded."); } }); } } }); JSON: { "title": "Tilte Text", "bodyText": "Body text", "_classes": { "titleClass": "className" } } <div id="templateBody"> <h1 id="title" v-if="jsonData.title" :class="jsonData._classes.titleClass">{{ jsonData.title }}</h1> </div>El problema en el código es el valor inicial nulo de jsonData en el modelo de datos. Si reemplazamos el valor nulo de jsonData (jsonData: null) con un objeto vacío (jsonData: {}) , entonces no obtenemos el error.
TypeError no capturado: no se puede leer la propiedad 'título' de nulo
Según tengo entendido, cuando escribimos v-if="jsonData.title" , entonces vue considera jsonData como un objeto javascript e intenta encontrar el valor del título , pero le hemos asignado el valor nulo, por eso devuelve TypeError . No es un problema de la carga aysnc del archivo JSON.
var viewModel = new Vue({ el: '#templateBody', data: { jsonData: {} }, created: function() { var self = this; self.fetchJSONData(); }, methods: { fetchJSONData: function() { var self = this; $.getJSON("data.json", function(data, status, xhr) { if (status == "success") { self.jsonData = data; } else { console.log("JSON data not Loaded."); } }); } } }); JSON: { "title": "Tilte Text", "bodyText": "Body text", "_classes": { "titleClass": "className" } } <div id="templateBody"> <h1 id="title" v-if="jsonData.title" :class="jsonData._classes.titleClass">{{ jsonData.title }}</h1> </div>